<template>
  <Mask :showMask="showMask" @close="closeMask">
    <div class="shopCart">
      <div class="title">购物车</div>
      <div class="cartList">
        <div class="remove" @click="goRemove">删除</div>
        <div
          v-for="(item, index) in shopCart.shopCartList"
          :key="item.id"
          class="cartItem"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove($event, index)"
          @touchend="handleTouchEnd($event, index)"
          ref="item"
        >
          <div>
            <input
              type="checkbox"
              @change="checkShopCart(item)"
              :checked="item.checked"
            />
          </div>
          <div>
            <img :src="item.imgUrl" alt="" />
            <div>
              <div class="desc">{{ item.desc }}</div>
              <div>￥{{ item.price }}</div>
            </div>
          </div>
          <div>
            <span @click="shopCart.removeShopCart(item)">-</span>
            <span @click="ejectKeyWord(item)">{{ item.count }}</span>
            <span @click="shopCart.addShopCart(item)">+</span>
          </div>
          <button class="removeBtn" @click="romoveItem(item)">删除</button>
        </div>
      </div>
      <div class="slot"></div>
      <div class="bottom">
        <div class="left">
          <div>
            <input type="checkbox" @change="selectAll = !selectAll" />
            <span>全选</span>
          </div>
          <div>
            <div>
              <span>合计：</span>
              <span>￥{{ statistics.total }}</span>
            </div>
            <div>已免运费</div>
          </div>
        </div>
        <div class="right">
          <button>结算({{ statistics.count }})</button>
        </div>
      </div>
    </div>
  </Mask>
  <CustomKeyboard
    :showkeyboard="showKeyboard"
    :num="num"
    @clickKey="getKeyWord"
    @splice="spliceKeyWord"
  />
</template>

<script setup>
import CustomKeyboard from "@/components/CustomKeyboard.vue";
import shopCartStore from "@/store/module/shopCart";
import { computed, ref, watch, nextTick } from "vue";
import Mask from "@/components/Mask.vue";

const shopCart = shopCartStore();
shopCart.shopCartList.forEach((item) => {
  item.checked = false;
});
const item = ref(null);
const showKeyboard = ref(false);
const showMask = ref(false);
const num = ref(0);
const selectId = ref(null);
const selectAll = ref(false);
const startX = ref(0);
const startY = ref(0);
const clickKeyWord = ref("");
const canSort = ref(false);
const startTime = ref(null);
const endTime = ref(null);
watch(selectAll, (newVal) => {
  shopCart.shopCartList.forEach((item) => {
    item.checked = newVal;
  });
});
const statistics = computed(() => {
  let total = 0;
  let count = 0;
  shopCart.shopCartList.forEach((item) => {
    if (item.checked) {
      total += item.price * item.count;
      count += item.count;
    }
  });
  return {
    total: total.toFixed(2),
    count: count,
  };
});
const spliceKeyWord = () => {
  num.value = String(num.value).slice(0, -1);
  num.value = Number(num.value);
  if (clickKeyWord.value === "确定") {
    shopCart.shopCartList.forEach((item) => {
      if (item.id == selectId.value) {
        item.count = num.value;
      }
    });
    if (num.value == 0) {
      shopCart.removeShopCart(
        shopCart.shopCartList.find((item) => item.id == selectId.value)
      );
    }
  }
};
const getKeyWord = (e) => {
  clickKeyWord.value = e;
  if (e !== "确定" && e !== "取消") {
    num.value += e + "";
    num.value = Number(num.value);
  } else if (e === "取消") {
    showKeyboard.value = false;
    showMask.value = false;
  } else if (e === "确定") {
    shopCart.shopCartList.forEach((item) => {
      if (item.id == selectId.value) {
        item.count = num.value;
      }
    });
    showKeyboard.value = false;
    showMask.value = false;
    clickKeyWord.value = "";
  }
};
const closeMask = (e) => {
  if (e) {
    showKeyboard.value = false;
    showMask.value = false;
  }
};
const ejectKeyWord = (item) => {
  selectId.value = item.id;
  num.value = item.count;
  showMask.value = true;
  showKeyboard.value = true;
};
function handleTouchStart(event) {
  startTime.value = new Date().getTime();
  startX.value = event.touches[0].clientX;
  startY.value = event.touches[0].clientY;
}
function arrSort(arr, index, tindex) {
  let temp = arr[index];
  arr.splice(index, 1);
  arr.splice(tindex, 0, temp);
  canSort.value = false;
}
function handleTouchMove(event, index) {
  endTime.value = new Date().getTime();
  if (endTime.value - startTime.value >= 1000) {
    canSort.value = true;
  }
  let deltaX = event.changedTouches[0].clientX - startX.value;
  let deltaY = event.changedTouches[0].clientY - startY.value;
  nextTick(() => {
    item.value = document.querySelectorAll(".cartItem");
  });
  let dom = item.value[index];
  if (!canSort.value) {
    if (deltaX < 0 && Math.abs(deltaX) < dom.offsetWidth / 2.5) {
      dom.style.transform = `translateX(${deltaX}px)`;
    } else if (deltaX > 0) {
      dom.style.transform = `translateX(0)`;
      dom.style.transition = "transform 0.5s linear";
    }
  } else {
    let height = dom.offsetHeight;
    let transformIndex = Math.round(deltaY / height);
    dom.style.transform = `translateY(${deltaY}px)`;
  }
}
function handleTouchEnd(event, index) {
  let deltaX = event.changedTouches[0].clientX - startX.value;
  let deltaY = event.changedTouches[0].clientY - startY.value;
  let dom = item.value[index];
  let height = dom.offsetHeight;
  let transformIndex = Math.round(deltaY / height);
  if (canSort.value) {
    dom.style.transform = `translateY(0)`;
  }
  startX.value = 0;
  startY.value = 0;
  if (canSort.value && deltaX !== 0 && deltaY !== 0) {
    arrSort(shopCart.shopCartList, index, index + transformIndex);
  }
}
const checkShopCart = (item) => {
  item.checked = !item.checked;
};
const romoveItem = (item) => {
  let spliceList = [];
  spliceList.push(item);
  shopCart.removeShopCartItem(spliceList);
};
const goRemove = () => {
  let spliceList = [];
  shopCart.shopCartList.forEach((item, index) => {
    if (item.checked) {
      spliceList.push(item);
    }
  });
  shopCart.removeShopCartItem(spliceList);
};
</script>

<style scoped lang="scss">
.slot {
  height: 16vw;
}
.removeBtn {
  height: 26.667vw;
  -webkit-transform: translateX(130%);
  -moz-transform: translateX(130%);
  -ms-transform: translateX(130%);
  -o-transform: translateX(130%);
  transform: translateX(130%);
  width: 53.333vw;
  border-radius: 4vw;
  color: #fff;
  background-color: rgb(200, 33, 33);
  border: 0;
  font-size: 3.733vw;
}
.bottom {
  position: fixed;
  bottom: 13.333vw;
  left: 0;
  width: 100vw;
  font-size: 3.733vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 0 2.667vw;
  height: 16vw;
  .right {
    button {
      background-color: rgb(45, 184, 81);
      border: 0;
      color: #fff;
      padding: 1.333vw 6.667vw;
      border-radius: 4vw;
    }
  }
  .left {
    display: flex;
    align-items: center;
    & > div:nth-child(2) {
      div:nth-child(2) {
        color: #999;
      }
      div:nth-child(1) {
        margin-bottom: 1.333vw;
        span:nth-child(2) {
          color: rgb(250, 43, 26);
        }
      }
    }
    & > div:nth-child(1) {
      margin-right: 2.667vw;
      display: flex;
      align-items: center;
    }
  }
}
.cartList {
  margin: 2.667vw;
  box-sizing: border-box;
  .cartItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.667vw;
    position: relative;
    background-color: #fff;
    border-radius: 4vw;
    padding: 2.667vw;
    & > div:nth-child(3) {
      position: absolute;
      right: 1.333vw;
      bottom: 2.667vw;
      background-color: #f0f0f0;
      padding: 1.333vw 5vw;
      border-radius: 4vw;
      span {
        font-size: 5.333vw;
        color: rgb(180, 222, 196);
      }
      span:nth-child(2) {
        margin: 0 4vw;
        color: #000;
        font-size: 3.733vw;
      }
    }
    & > div:nth-child(2) {
      display: flex;
      font-size: 3.733vw;
      margin-left: 1.333vw;
      div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .desc {
          max-width: 80vw;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      img {
        width: 21.333vw;
        height: 21.333vw;
        border-radius: 4vw;
      }
    }
  }
  .remove {
    text-align: right;
    font-size: 3.733vw;
    margin: 2.667vw 0;
  }
}
.shopCart {
  background-color: #f0f0f0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}
.title {
  font-size: 3.733vw;
  background-color: #fff;
  padding: 2.667vw;
}
</style>
